<template>
  <div class="home-view">
    111
    <list-scroller api="/api/v2/movie/top250" class="movie-list"
                   :searchParams="{}">
      <template slot-scope="props">
        <div v-for="(item,index) in props.listData" :key="item.id" class="movie-item">
          <router-link :to="'event/' + item.id">
            <img :src="item.images.small" alt="">
            <div class="movie-info">
              <h3>{{index + 1}} {{item.title}} / {{item.original_title}}</h3>
              <h5>类型：{{item.genres.join('/')}}</h5>
              <p>上映日期：{{item.year}}</p>
              <p>评分：{{item.rating.average}}</p>
            </div>
          </router-link>
        </div>
      </template>
    </list-scroller>
  </div>
</template>

<script>
  import ListScroller from '../components/ListScroller'

  export default {
    name: 'home-view',
    components: {
      ListScroller
    },
    data () {
      return {
        img: ''
      }
    },
    computed: {
    },
    methods: {

    },
    created () {
    },
    mounted () {
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/sass/variables";

  .home-view {
    .movie-list {
      padding: 0 10px;
      margin: 0;
      .movie-item {
        padding: 10px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 4px;
        a {
          display: flex;
          img{
            width: 64px;
            height: 103px;
          }
          .movie-info{
            margin-left: 10px;
          }
        }
      }
    }

  }

</style>
